<script>
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import QueryBar from '../components/queryBar.svelte';
  import Paging from '../components/paging.svelte';
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {ActiveFreezeUser, AgentListDashboard, AgentList,ModifyVfunds} from '../api.js';
  import Query from '../model/query.js';
  import moment from 'moment';

  let btnText = '上传包'
  let btnHref = "/agent/add/three"

  let data = {
    title: ["编号", "类型", "上传时间", "状态",""],
    data: []
  }

  let total = 0;
  let agents = 0;
  let users = 0;
  let adminOrUser=false
  var fileUp
  var phone
  // 向列表赛数据，须先定义表头，拿到数据后做title下表映射关系.
  let query = new Query();
  onMount(() => {
    if (localStorage.getItem("uid") == -1) {
      adminOrUser = true
    } else {
      adminOrUser = false
    }
    // getInfo();
    getList();
	
	
	var file = document.getElementById("file");
	file.onchange = function(){
		if(file.files.length > 0){
		  document.getElementById('filename').innerHTML = file.files[0].name;
		  //获取到选中的文件
		  fileUp = file.files[0];
		  // console.log(fileUp)
		}
	};
	sele()
  });
  window.modifyVFunds = async function(uid) {
    let val = event.target.value;
    await Post(ModifyVfunds,{
      uid: Number(uid),
      amount: val,
    })
    // console.log(uid,123)
  }
  async function getList(e) {

    if (!!e) {
      query.start = e.detail.start
      query.end = e.detail.end
      query.type = 3
    }
    if (query.start==''){
      query.end=''
		}
    query.type = 3
    let ret = await Post(AgentList, query)
    query.total = ret.total;
    total = ret.total;
    let _data = [];
    if (!ret.list) ret.list = [];
	const user_type=localStorage.getItem("user_type");
    for (let item of ret.list) {
      let arr = [
		  item.id, 
		  item.userinfo.name,
		  moment(item.createDate).format("YYYY-MM-DD hh:mm:ss")
		  ];
		  if(user_type=='1'){
			  arr.push(`<button class="button is-info" data-id="${item.id}">当前版本</button>`)
		  }else{
			  arr.push(`<button class="button is-success is-small" data-id=${item.id} type="access" on:click> 删除 </button>`)
			  arr.push(`<button class="button is-danger is-small" data-id=${item.id} type="failed" on:click>选Ta</button>`)
		  }
	  
      arr.id = item.id;
      arr.handler = changeState;
      _data.push(arr);
    }
    data.data = _data;
  }

  async function changeState() {
    event.stopPropagation()
    let btn = this.querySelector("button");
    let id = btn.getAttribute("data-id");
    let btnType = btn.getAttribute("type");
    if (btnType == "access") {
    	alert('access')
      // await Post(WithdrawConfirm, {id});
    } else {
    	alert('取消')
      // await Post(WithdrawRefuse, {id})
      
    }
    // await Post(ActiveFreezeUser, {id: Number(id)});
    // getList();
  }
  
  async function sureUp(){//提交包包
	  //创建formdata对象
	  console.log(fileUp)
	  var formdata = new FormData();
	  formdata.append("file",fileUp);
	  
	  // console.log(formdata)
	  console.log(phone)
	  // await Post(ActiveFreezeUser, {id: Number(id)});
	  // getList();
  }
  
  
  async function getInfo() {
    let ret = await Post(AgentListDashboard);
    if (!ret) return

    for (let item of ret) {
      if (item.key === "total") total = item.num;
      if (item.key === "agents") agents = item.num;
      if (item.key === "users") users = item.num;
    }
  }

  function setPage(page) {
    query.page = page;
    getList();
  }
  function sele(){
	    if(document.getElementById("agreement").checked==true){//安卓
			phone='anzhuo'
		}else if(document.getElementById("agreement").checked==false){//ios
			phone='ios'
	    }
  }

 
</script>

<div class="view">
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px" class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            上传包管理
        </span>
		</div>
		<div class="borderRadius4 container backWhite colorWhite" style="margin-bottom: 0;">
				<div class="columns" style="padding: 20px;">
						<div class="field" style="margin: 0 auto;">
						  <div class="file is-boxed is-success has-name">
						    <label class="file-label">
						      <input class="file-input" type="file" name="resume" id="file" >
						      <span class="file-cta">
						        <span class="file-icon" style="background: url(images/upload.png) center center / cover no-repeat;">						
						          <!-- <i class="fas fa-upload"></i> -->
						        </span>
						        <span class="file-label">
						          点击上传
						        </span>
						      </span>
						      <span class="file-name" style="color: saddlebrown;" id="filename" >
						        text
						      </span>
						    </label>
						  </div>
						</div>
						
				</div>
		</div>
		<div class="borderRadius4 container backWhite" style="margin-top: 0;padding-bottom: 20px;margin-bottom: 0;">
			<div class="control" style="text-align: center;">
			  <label class="radio">
				<input type="radio" name="answer" checked="true" on:change={sele} id="agreement">
				安卓版本
			  </label>
			  <label class="radio">
				<input type="radio" name="answer" id="agreementIos" on:change={sele}>
				iOS版本
			  </label>
			</div>
		</div>
		<div class="borderRadius4 container backWhite" style="margin-top: 0;padding-bottom: 20px;">
			  <div class="buttons has-addons is-centered">
			    <span class="button is-info" on:click={sureUp}>确定并提交</span>
			  </div>
		</div>
		<!-- <div class="container">
				<QueryBar query={query} on:message={getList}/>
		</div> -->
		<div class="container" style="margin-top:-10px">
				<List data={data}/>
		</div>
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.borderRadius4 {
				border-radius: 4px;
		}

		.container {
				margin: 20px 5px;
		}

		.info {
				background: #fff;
		}

		.btn {
				line-height: 5px;
				top: 50%;
				transform: translateY(10%);
		}
		
		
        table /deep/  tr td:last-child{
			width: 60px !important;
		}
		
</style>
